<template>
<scroll-view class="recommend_view" @scrolltolower="scrollToLower" scroll-y v-if="recommends.length > 0">
  <!-- 推荐 开始 -->
  <view class="recommend_wrap">
    <navigator class="recommend_item" v-for="item in recommends" :key="item.id" :url="`/pages/album/index?id=${item.target} `">
      <image mode="widthFix" :src="item.thumb"></image>
    </navigator>
  </view>
  <!-- 推荐 结束 -->
  <!-- 月份 开始 -->
  <view class="monthes_wrap">
    <view class="monthes_title">
      <view class="title_info">
        <view class="info">
          <text> {{ monthes.DD }}/ </text>
          {{ monthes.MM }} 月
        </view>
        <view class="text">{{ monthes.title }}</view>
      </view>
      <view class="title_more">更多 > </view>
    </view>
    <view class="monthes_content">
      <view class="monthes_item" v-for="(item, index) in monthes.items" :key="item.id">
        <go-detail :list="monthes.items" :index="index">

        <image mode="aspectFill" :src="item.thumb + item.rule.replace('$<Height>', 360)"></image>
        </go-detail>
      </view>
    </view>
  </view>
  <!-- 月份 结束 -->
  <!-- 热门 开始 -->
  <view class="hots_wrap">
    <view class="hots_title">
      <text> 热门 </text>
    </view>
    <view class="hots_content">
      <view class="hot_item" v-for="(item, index) in hots" :key="item.id">
        <go-detail :list="hots" :index="index">

        <image mode="widthFix" :src="item.thumb"></image>
        </go-detail>
      </view>
    </view>
  </view>
  <!-- 热门 结束 -->
</scroll-view>
</template>

<script>
import moment from 'moment'
import goDetail from '@/components/GoDetail'
export default {
  components: {
    goDetail
  },
  data() {
    return {
      recommends: [],
      monthes: {},
      hots: [],
      params: {
        limit: 30,
        order: 'hot',
        skip: 0
      },
      hasMore: true
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.request({
        url: 'image/v3/homepage/vertical',
        data: this.params
      }).then(res => {
        if (res.res.vertical.length === 0) {
          this.hasMore = false
          uni.showToast({
            title: '没有数据了',
            icon: 'none'
          })
          return
        }
        console.log(res)
        if (this.recommends.length === 0) {
          this.recommends = res.res.homepage[1].items

          this.monthes = res.res.homepage[2]
          this.monthes.MM = moment(this.monthes.stime).format('MM')
          this.monthes.DD = moment(this.monthes.stime).format('DD')
        }

        this.hots = [...this.hots, ...res.res.vertical]
      })
    },
    scrollToLower() {
      if (this.hasMore) {
        this.params.skip += this.params.limit
        this.getList()
      } else {
        uni.showToast({
          title: '没有数据了',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.recommend_view {
  height: calc(100vh - 36px);
}

.recommend_wrap {
  display: flex;
  flex-wrap: wrap;

  .recommend_item {
    width: 50%;
    border: 5rpx solid #fff;

    image {}
  }
}

.monthes_wrap {
  .monthes_title {
    padding: 20rpx;
    display: flex;
    justify-content: space-between;

    .title_info {
      color: $color;
      font-size: 30rpx;
      display: flex;

      .info {
        text {
          font-size: 36rpx;
          font-weight: 600;
        }
      }

      .text {
        font-size: 32rpx;
        color: #666;
        margin-left: 30rpx;
      }
    }

    .title_more {
      font-size: 28rpx;
      color: $color;
    }
  }

  .monthes_content {
    display: flex;
    flex-wrap: wrap;

    .monthes_item {
      width: 33.33%;
      border: 5rpx solid #fff;
    }
  }
}

.hots_wrap {
  .hots_title {
    padding: 20rpx;

    text {
      border-left: 20rpx solid $color;
      padding-left: 20rpx;
      font-size: 30rpx;
      font-weight: 600;
    }
  }

  .hots_content {
    display: flex;
    flex-wrap: wrap;

    .hot_item {
      width: 33.33%;
      border: 5rpx solid #fff;

      image {}
    }
  }
}
</style>
